import React, {useEffect} from 'react';
// import CheckIcon from '@material-ui/icons/Check';
import ToggleButton from '@material-ui/lab/ToggleButton';
import RemoveIcon from '@material-ui/icons/Remove';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
import PauseRoundedIcon from '@material-ui/icons/PauseRounded';

export default function Start(props) {
  const [selected, setSelected] = React.useState(false);

  useEffect(() => {
      setSelected(false);
  }, [props.select])

  return (
    <ToggleButton
      value="check"
      selected={selected}
      // onChange={() => {
      //   setSelected(!selected);
      // }}
      onClick={() => {
            let temp = !selected;
            setSelected(!selected);
            props.handlePaused(!temp);
            if (temp) {
                props.onStart();
            }
      }}
      style={{border:"0", width: "80px", backgroundColor: "#F8F9FA"}}
    >
      {selected ? <PauseRoundedIcon /> : <PlayArrowRoundedIcon />}
    </ToggleButton>
  );
}
